<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS动画</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		html {
			font-size: 16px;
		}
		div.animation-container {
			margin: 20px;
			padding: 20px;
			width: 80%;
			border-radius: 20px;
			border: 1px solid grey;
		}

		/* transition过渡动画
	 	属性：
		transition-property		指定使用过渡效果的css属性，默认值为all。
		transition-duration 	设置过渡动画持续时间
		transition-timing-function		设置动画的时间函数。
		transition-delay	设置动画的延迟时间
		局限：
		（1）transition需要事件触发，所以没法在网页加载时自动发生。
		（2）transition是一次性的，不能重复发生，除非一再触发。
		（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
		（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
		*/
		/*transition动画-1*/
		div.tra_1 {
			display: inline-block;
			width: 50px;
    		height: 50px;
    		background-color: pink;
    		transition-property: all;
    		transition-duration: 0.8s;
		}
		div.tra_1::after {
			content: '*';
			color: rgba(255, 255, 255, 0.8);
			width: inherit;
			height: inherit;
			display: flex;
			justify-content: center;
			align-items: center;
			transition-duration: 0.8s;
		}
		div.tra_1:hover {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: skyblue;
		}
		div.tra_1:hover::after {
			content: 'o';
			font-size: 80px;
		}
		/*transition动画-2*/
		div.tra_2 {
			margin-top: 10px;
			width: 120px;
			height: 50px;
			background-color: antiquewhite;
			color: tomato;
			transition-property: width, background-color, color;
			transition-duration: 0.5s, 1s, 2s;
			transition-timing-function: ease, linear, ease-in-out;
			transition-delay: 2s, 1s, 0.5s;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		div.tra_2:hover {
			width: 200px;
			background-color: darkseagreen;
			color: white;
		}
		/*transition动画-3*/
		div.tra_3 {
			margin-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120px;
			height: 50px;
			background-color: antiquewhite;
			color: tomato;
			/* transition综合属性，顺序为：
				transition-property
				transition-duration
				transition-timing-function
				transition-delay
			*/
			transition: width 0.5 ease, background-color 1s linear 1s, color 2s ease-in-out 0.5s;
		}
		div.tra_3:hover {
			width: 200px;
			background-color: darkseagreen;
			color: white;
		}




		/* animation @keyframes关键帧动画
		参考：https://juejin.cn/post/7052506940777168927?searchId=2024082617312593491F501E4E780D748D#heading-9

		属性：
		animation-name：指定由 @keyframes 描述的关键帧名称。
		animation-duration：设置动画一个周期的时长。
		animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
		animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
		animation-iteration-count：设置动画重复次数， 可以指定 infinite 无限次重复动画
		animation-play-state：允许暂停和恢复动画。
		animation-timing-function：设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
		animation-fill-mode：指定动画执行前后如何为目标元素应用样式
		@keyframes 规则，当然，一个动画想要运行，还应该包括 @keyframes 规则，在内部设定动画关键帧

		必须项：animation-name、animation-duration 和 @keyframes规则

		适用于CSS动画的属性：
		1. 变形属性（Transform）
			transform: 支持平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等2D/3D变换，这些变换非常适合制作位移、旋转、变形等动画效果。
		2. 不透明度属性（Opacity）
			opacity: 控制元素的透明度，常用于实现淡入、淡出等过渡效果。
		3. 颜色与背景属性
			color, background-color: 改变文字颜色或背景颜色，用于色彩渐变动画。
			background-position: 适用于背景图平滑移动或切换动画。
		4. 边框与阴影属性
			border-radius: 制作元素圆角变化动画。
			box-shadow, text-shadow: 用于阴影效果的动态变化。
		5. 其他可动画属性
			width, height: 改变元素尺寸。
			top, right, bottom, left: 动态调整定位元素的位置。
			font-size: 字体大小的变化动画。
			filter: 应用滤镜效果（如模糊、灰度、饱和度等）的动画。
		
		不适用于CSS动画或动画效果受限的属性：
		1. 显示属性（Display）
			display: 该属性无法平滑过渡，因为它直接控制元素是否显示或隐藏，没有中间状态。若需实现类似效果，可使用opacity配合visibility属性，或者结合max-height与overflow属性模拟元素的淡入淡出或滑动出现/消失。
		2. 浮动属性（Float）
			float: 浮动属性本身不具备动画效果，也无法平滑过渡。若需要元素在布局中平滑移动，应使用position结合transform属性。
		3. 背景图片替换（Background-image）
			background-image: 直接替换背景图片（如使用新的URL）无法产生动画效果。若需要背景图片连续变化，应使用CSS精灵（CSS Sprites）或CSS变量（CSS Variables）结合background-position实现动画。
		4. 一些计算密集型属性
			z-index: 层叠顺序的改变通常不适用于动画，因为其即时生效且没有中间状态。
			content: 在伪元素中，content属性的内容不能进行动画化，因为它不是数值或颜色等可平滑过渡的值。

		*/
		div.ani_1 li{
			width: 120px;
			height: 44px;
			background-color: aqua;
			color: white;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;

			animation-name: init_move;
			animation-duration: 1s;
		}
		div.ani_1 li:nth-child(2) {
			animation-delay: 0.2s;
		}
		div.ani_1 li:nth-child(3) {
			animation-delay: 0.4s;
		}
		div.ani_1 li:nth-child(2n) {
			background-color: rgb(184, 127, 54);
		}
		div.ani_1 li:not(:last-child) {
			margin-bottom: 1px;
		}

		@keyframes init_move {
			/* from {
				transform: translateX(100px);
				opacity: 0;
			}
			to {
				transform: translateX(0);
				opacity: 1;
			} */
			0% {
				transform: translateX(100px);
				opacity: 0;
			}
			50% {
				transform: translateX(50x);
				opacity: 0.4;
			}
			100% {
				transform: translateX(0);
				opacity: 1;
			}
		}

		/* 文字蒙版案例 */
		div.ani_2 {
			font-family: Arial, Helvetica, sans-serif;
  			background: #000;
  			color: #fff;
  			overflow: hidden;
			height: 6rem;
			display: flex;
			flex-direction: column;
			align-items: center;
  			justify-content: center;
  			text-align: center;
		}
		div.ani_2 .animated {
			font-family: 'Charm', cursive;
  			margin: 0;
  			padding: 0;
  			font-size: 3rem;
 			background: url('./images/text-bg.png') no-repeat;
  			background-clip: text;
  			-webkit-background-clip: text;
  			color: transparent;
  			animation: moveBg 90s linear infinite;
  			-webkit-animation: moveBg 90s linear infinite;
		}
		@keyframes moveBg {
 			0% {
    			background-position: 0% 30%;
  			}

  			100% {
    			background-position: 100% 50%;
  			}
		}
	</style>
</head>
<body>
	<h2>Transition过渡动画</h2>
	<div class="animation-container">
		<div class="tra_1">
		</div>
		<div class="tra_2">
			<span>多属性累加-1</span>
		</div>
		<div class="tra_2">
			<span>多属性累加-2</span>
		</div>
	</div>
	<h2>@keyframes关键帧动画</h2>
	<div class="animation-container">
		<div class="ani_1">
			<ul>
				<li><span>item-1</span></li>
				<li><span>item-2</span></li>
				<li><span>item-3</span></li>
			</ul>
		</div>
		<div class="ani_2">
			<h1 class="animated">Merry Christmas</h1>
		</div>
	</div>
</body>
<script type="text/javascript">
	let thirdLi = document.querySelector('div.ani_1 li:nth-child(3)');
	thirdLi.addEventListener('animationend', function(){
		alert('第三个li动画执行完毕!');
	});
</script>
</html>